<template>
  <div>
    <div class="commontop">
      <div class="commontop-left">
        <el-input
          v-model="pages.keyword"
          @change="INput"
          @clear="INput"
          @keyup.enter.native="goSearch()"
          clearable
          prefix-icon="el-icon-search"
          placeholder="封面内容"
        ></el-input>
        <el-button
          class="searchbgc"
          @click="goSearch"
          icon="iconfont icon-sousuo2"
          >搜索</el-button
        >
        <el-button
          icon="iconfont icon-tianjiaanjuanfengmian"
          @click="dialogVisible = true"
          v-show="xsyc === '1' ? true : false"
          >{{ titles }}</el-button
        >
      </div>

      <div class="commontop-right">
        <el-button
          class="red"
          icon="iconfont icon-shanchu1"
          @click="deleteSelectItem()"
          v-show="xsyc === '1' ? true : false"
          >删除</el-button
        >
      </div>
    </div>
    <el-table
      v-loading="isLoading"
      ref="multipleSelection"
      :data="tableData"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
      style="width: 100%; margin-top: 20px"
    >
      <template slot="empty">
        <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
        <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
      </template>
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="thumb" label="示例图">
        <template slot-scope="scope">
          <!--trigger属性值：hover、click、focus 和 manual-->
          <!--   <a :href="scope.row.thumb" target="_blank" title="查看最大化图片">
              <img :src="scope.row.thumb" style="width: 520px; height: 580px" />
            </a> -->
          <img
            @click="Showurl(scope.row)"
            slot="reference"
            :src="scope.row.thumb"
            style="width: 50px; height: 50px; cursor: pointer"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <!--  v-if="scope.row.value1 == true ? true : false" -->
          <el-button class="green" size="mini" @click="showEdit(scope.row.id)"
            ><i class="el-icon-edit"></i
          ></el-button>
          <el-button
            class="red"
            size="mini"
            @click.native.prevent="deleteRow(scope.row.id)"
            ><i class="el-icon-delete"></i
          ></el-button>
          <!-- <el-tooltip content="查看文件" placement="top">
            <el-button @click="SeePdf(scope.row)" class="green" size="mini"
              ><i class="iconfont icon-piliangdaorupdf"></i
            ></el-button>
          </el-tooltip> -->
          <el-tooltip
            class="item"
            effect="dark"
            :content="scope.row.origin_name"
            placement="top-start"
          >
            <a :href="scope.row.url" :headers="headers" download="文件.xlsx"
              ><el-button class="green" size="mini">
                下载文件<i class="el-icon-bottom"></i></el-button
            ></a>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="pageSizeArr"
        :page-size="pages.per_page"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog class="tab" width="65%" :visible.sync="UrlFormVisible">
      <!--   <img :src="fileUrl" /> -->
      <img border="0" :src="fileUrl" height="600" />
    </el-dialog>
    <el-dialog
      class="tab"
      title="编辑"
      width="35%"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item prop="thumb" label="示例图" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="/api/attachment/upload"
            :show-file-list="false"
            :headers="headers"
            ref="upload"
            :on-success="handleSuccess"
          >
            <img v-if="editForm.thumb" :src="editForm.thumb" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入标题"
            v-model="editForm.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="url" label="文件" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            drag
            :data="tables2"
            action="/api/attachment/upload"
            :limit="1"
            :headers="headers"
            :on-success="handleSuccess2"
            :file-list="fileList"
            ref="my-upload"
          >
            <i class="iconfont icon-wenjian wenjian"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <!--   <el-form-item
          label="说明"
          :label-width="formLabelWidth"
          v-show="isShow"
        >
          <el-input type="textarea" v-model="editForm.remark"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editModify('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      class="tab"
      :title="titles"
      :visible.sync="dialogVisible"
      width="35%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="请填写标题"></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload
            action="/api/attachment/upload"
            :show-file-list="false"
            :limit="1"
            ref="upload2"
            :data="tables"
            :headers="headers"
            :on-success="handleAvatarSuccess2"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="form.sort"
            :min="0"
            :max="99"
            label="描述文字"
          ></el-input-number>
          <p class="tips">选填，排序越高越在前面</p>
        </el-form-item>
        <el-form-item label="上传文件">
          <el-upload
            class="upload-demo"
            drag
            :data="tables2"
            action="/api/attachment/upload"
            :limit="1"
            :headers="headers"
            :on-success="handleAvatarSuccess"
            ref="my-upload"
          >
            <i class="iconfont icon-wenjian wenjian"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <!--  <el-form-item label="说明" v-show="isShow">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="SubmitBtn('form')">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import commonInfo from "@/utils/common";
import {
  templates,
  Addtemplates,
  deltemplates,
  dossiertemplates,
  deltemplatesMore,
  Modifydeltemplates,
} from "../../../../api/Template/index";
export default {
  props: { name: { type: Number } },
  data() {
    return {
      input: "",
      /* 表格数据 */
      tableData: [],
      /* 上传图片封面 */
      tables: {
        folder: "images",
      },
      /* 上传文件 */
      tables2: {
        folder: "templates",
        save_type: "local",
      },
      /* 头部 */
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      /* 页面 */
      pages: {
        per_page: 10,
        page: 1,
        keyword: "",
        type: "",
      },
      fileUrl: "",

      fileList: [{ name: "", url: "" }],
      UrlFormVisible: false,
      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      current_page: 1,
      titles: "添加",
      /* 数组 */
      multipleSelection: [],
      total: 0,
      isLoading: true,
      drawer: true,
      //备考表是否显示说明
      /*   isShow: false, */
      //编辑蒙尘
      dialogFormVisible: false,
      /* 编辑表单 */
      editForm: {
        thumb: "",
        title: "",
        id: "",
        type: "",
        url: "",
      },
      /* 表单宽度 */
      formLabelWidth: "120px",
      //按钮显示隐藏
      xsyc: "1",
      /* 搜索 */

      /* 图片封面地址 */
      imageUrl: "",
      /* 新增蒙尘 */
      dialogVisible: false,
      //新增表单
      form: {
        title: "",
        type: "1",
        url: "",
        sort: "",
        thumb: "",
        origin_name: "",
        remark: "",
      },
    };
  },
  methods: {
    /* 表格数据 */
    async loadData(num) {
      //console.log(this.name);
      let type = this.name;
      //console.log("type:", type);
      if (type == 1) {
        this.titles = "添加案卷封面";
      } else if (type == 2) {
        this.titles = "添加备考表";
        /*    this.isShow = true; */
      } else if (type == 3) {
        this.titles = "添加案卷目录";
      } else if (type == 4) {
        this.titles = "添加卷内目录";
      } else if (type == 5) {
        this.titles = "添加全引目录";
      }
      this.pages.type = type;
      this.pages = num;
      let res = await templates(num);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.current_page = res.data.data.current_page;
      this.isLoading = false;
    },
    INput() {
      if (this.pages.keyword == "") {
        this.loadData(this.pages);
      }
    },

    //图片成功后
    handleAvatarSuccess2(response, file, fileList) {
      console.log(response, file, fileList);
      this.$message({
        showClose: true,
        duration: 3000,
        message: response.msg,
        type: "success",
      });
      this.form.thumb = response.data.file;
      this.imageUrl = response.data.file;
      this.$refs.upload2.clearFiles();
    },
    //文件成功后
    handleAvatarSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      console.log("123");
      console.log(response.data, "11");
      this.$message({
        showClose: true,
        duration: 3000,
        message: response.msg,
        type: "success",
      });
      this.form.url = response.data.file;
      this.form.origin_name = response.data.origin_name;

      /* this.$refs.upload.clearFiles(); */
    },
    //编辑成功
    editModify(formName) {
      this.editForm.type = this.name;
      this.$refs[formName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await Modifydeltemplates(this.editForm);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData(this.pages);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogFormVisible = false;
      });
    },

    //搜索
    async goSearch() {
      this.pages.page = 1;
      this.pages.per_page = 10;
      this.current_page = 1;
      console.log(this.pages.keyword);
      if (this.pages.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      let res = await templates(this.pages);
      console.log(res, "123");
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;

      this.current_page = res.data.data.current_page;
    },
    /* 显示路由 */
    Showurl(row) {
      this.UrlFormVisible = true;
      console.log(row);
      this.fileUrl = row.thumb;
      console.log(this.fileUrl);
    },

    /* 关闭蒙尘 */
    handleClose() {
      this.loadData(this.pages);
      this.dialogFormVisible = false;
    },
    //编辑
    async showEdit(id) {
      let res = await dossiertemplates({ id });
      console.log(res, "11");
      this.editForm.id = res.data.data.id;
      this.editForm.thumb = res.data.data.thumb;
      this.editForm.title = res.data.data.title;
      this.editForm.url = res.data.data.url;
      console.log(res.data.data.url);
      this.fileList[0].url = res.data.data.url;
      this.fileList[0].name = this.editForm.title;
      console.log(this.fileList[0]);

      this.dialogFormVisible = true;
    },
    //删除
    deleteRow(id) {
      this.$confirm("确认删除？")
        .then(async (_) => {
          let res = await deltemplates({ id });
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData(this.pages);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((_) => {
          this.$message({
            showClose: true,
            duration: 3000,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.pages.page = val;
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    // 示例图上传
    handleSuccess(response, file, fileList) {
      this.$message({
        showClose: true,
        duration: 3000,
        message: response.msg,
        type: "success",
      });
      this.editForm.thumb = response.data.file;
    },
    // 文件上传
    handleSuccess2(response, file, fileList) {
      this.$message({
        showClose: true,
        duration: 3000,
        message: response.msg,
        type: "success",
      });
      this.editForm.url = response.data.file;
    },
    //多选删除
    deleteSelectItem() {
      console.log(this.multipleSelection);
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请先选中要删除的数据哦！ 亲",
          type: "error",
        });
      } else {
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let arr = this.multipleSelection.map((item) => item.id);
          let ids = arr.join(",");
          let res = await deltemplatesMore({ ids });
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData(this.pages);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        });
      }
    },
    //提交
    SubmitBtn(formName) {
      this.form.type = this.name;
      console.log(this.form);
      this.$refs[formName].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          let res = await Addtemplates(this.form);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
            this.loadData(this.pages);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
  },

  created() {
    this.loadData(this.pages);
  },
};
</script>

<style scoped lang="less">
@import "../../../../assets/css/PhotoUpload.less";

/deep/.el-upload-dragger {
  padding-top: 20px;
  height: 130px;
}
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 14px !important;
  padding: 7px 5px;
}
.el-button--small {
  padding: 11px 15px;
}
a {
  margin-left: 10px;
}
</style>